<!-- html -->
<template>
  <h2 class="h2">watchEffect，自动监视reactive</h2>
  <span class="span2">num1：</span>
  <input class="input1" type="number" v-model="nums.num1">
  <span class="span2">num2：</span>
  <input class="input1" type="number" v-model="nums.num2">
  <span class="span2">num3：</span>
  <input class="input1" type="number" v-model="nums.num3">
  <button class="button1" @click="changeNum1">修改num1</button>
  <button class="button1" @click="changeNum2">修改num2</button>
  <button class="button1" @click="changeNum3">修改num3</button>
  <button class="button1" @click="changeNums">修改nums</button>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'watchEffectReactiveTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { reactive, watchEffect } from 'vue'
//数据
let nums = reactive({ num1: 1, num2: 1, num3: 1 })
//方法
function changeNum1() {
  nums.num1 += 1
}
function changeNum2() {
  nums.num2 += 1
}
function changeNum3() {
  nums.num3 += 1
}
function changeNums() {
  nums = ({ num1: 11, num2: 22, num3: 33 })
  console.log('nums：', nums)
}
//无法自动监视reactive对象类型
watchEffect(() => {
  console.log('nums变化，新值为：', nums)
})
//自动监视reactive对象类型内部属性，开启默认执行
watchEffect(() => {
  console.log('num1变化，新值为：', nums.num1)
})
//自动监视多个reactive类型，开启默认执行
watchEffect(() => {
  console.log('多个内容变化，num2变化，新值为：', nums.num2, '，num3变化，新值为：', nums.num3)
})
</script>

<!-- 样式 -->
<style scoped></style>